.archive-card
  width: 100%
.archive-card-header
  margin-bottom: 6px
  font-size: $base-font-size
  .iconfont
    font-size: $base-font-size
.archive-card-list-item
  display: block
  color: var(--text-color)
  font-size: $ml-font-size
  padding: 6px 8px
  transition: all 0.4s
  &:hover
    padding: 6px 12px
    cursor: pointer
    border-radius: 0.3rem
    background-color: var(--badge-background-color)
    transition: all 0.4s
    transition-duration: 0.3s
    transition-timing-function: ease-in-out
    .archive-card-list-item-badge
      background-color: var(--badge-hover-background-color)
      transition: all 0.4s
  + .archive-card-list-item
    margin-top: 3px
.archive-card-list-item-badge
  float: right
  margin-right: 10px
  font-size: $sm-font-size
  background-color: var(--badge-background-color)
  transition: all 0.4s
  padding: 3px 7px
  text-align: center
  border-radius: 0.3rem
@media (max-width: 862px)
  .archive-widget
    display: $widgets-mobile